<template>
  <div id="alert">
    <el-dialog title="警告" :visible.sync="centerDialogVisible" width="30%" center>
      <div v-loading="loading" class="inner-box">
        <div class="title">
          <span>您确定要删除此素材吗？删除后无法恢复</span>
        </div>
        <div class="footter">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
           <!-- 组件复用率不高，完全就是定制式的，这个方法应该是写在父级组件里，然后传过来这样比较合适 -->
           <!-- 这样的话还不如不提出来 -->
           <!-- 已经提了，那就算了 -->
          <el-button type="primary" @click="delImage">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import material from "@/api/materialManager/material";
export default {
  props: ["imageId"],
  data() {
    return {
      centerDialogVisible: false,
      loading: false
    };
  },
  methods: {
    delImage(){
      this.loading = true;
      material
        .delImage({
          id: this.imageId
        })
        .then(res => {
          this.loading = false;
          this.centerDialogVisible = false;
          //   父级组件传过来递事件
          // 这个是异步代码。异步和同步如何同时变成同步执行，还是同时变成异步后再用await变同步
           this.$message({
            message: `删除成功`,
            type: "success"
          });
          // 这个是异步代码
          console.log()
          this.$emit("getImageList");

        })
        .catch(res => {
          // 失败回调，出警告框
          this.$message({
            message: `网络有误，请刷新稍后重试，或者试着甩锅给后台`,
            type: "warning"
          });
          this.loading = false;
          this.centerDialogVisible = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped>

.inner-box {
    z-index: 0;
  width: 100%;
   text-align: center;

  .title{
      overflow: hidden;
      span{
          display: block;
          margin-top: 30px;
      }
      text-align: center;
      margin-bottom: 80px;
      margin-top: -35px;
  }
}

</style>

